<template>
  <!--  TODO 销售应收 -->
  <el-dialog v-model="visible" title="销售应收" destroy-on-close width="40%" :close-on-click-modal="false" @close="close">
    <div class="mb-2">
      <el-form :model="formData" :rules="formRules" size="small" ref="saleReceivableFormRef" label-width="110px" class="drawer-form">
<!--        <el-form-item prop="title" label="主题：">-->
<!--          <el-input v-model="formData.title" placeholder="请输入事项主题" maxlength="32" clearable style="width: 400px;"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="描述：" prop="content">-->
<!--          <editor v-model="formData.content" placeholder="请输入事项描述" height="250px"/>-->
<!--        </el-form-item>-->
        <el-form-item label="关联：">
          <module-relate :relateItems="changeRelateItems" :limiter="limiter" @required="required" @change="changeRelateItems"/>
        </el-form-item>
        <el-form-item prop="amount" label="应收金额：">
          <el-input v-model="formData.amount" type="number" placeholder="金额" style="width: 300px;" :disabled="!isEdit"/>
          <el-button size="small" style="margin-left: 10px" @click="openEdit" v-if="!isEdit" icon="ele-Edit">编辑</el-button>
          <el-button size="small" style="margin-left: 10px" @click="isEdit = false" v-if="isEdit" icon="ele-Select">保存</el-button>
          <el-checkbox v-model="formData.isNeedInvoice" label="需要发票" size="small" style="margin-left: 10px"/>
        </el-form-item>

        <el-form-item prop="lineFile" label="附件：">
          <el-upload class="upload-demo" drag
                     :action="action"
                     :multiple="false"
                     :auto-upload="false"
                     :headers="headers"
                     @change="changeFile"
                     style="width:100%">
            <el-icon class="el-icon--upload">
              <ele-UploadFilled/>
            </el-icon>
            <div class="el-upload__text">
              拖拽上传或 <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="remark" label="备注：">

          <el-popover
              :visible="isShowPopover"
              placement="bottom"
              title="注意"
              :width="300"
              content="修改应收金额需要注明修改金额原因"
          >
            <template #reference>
              <el-input type="textarea" v-model="formData.remark" />
            </template>
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="cancel(saleReceivableFormRef)">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="submit(saleReceivableFormRef)">保存</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>
import {computed, reactive, ref, toRefs} from "vue";
import Editor from '/@/components/editor/index.vue'
import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
import ModuleRelateByMoney from '/@/views/matter/components/ModuleRelateByMoney.vue'
import { Session } from '/@/utils/storage'

export default {
  name: "saleReceivable",
  emits:['onSubmit','update:dialogDrawer'],
  props: {
    dialogDrawer: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: null,
    },
  },
  components: {
    Editor,
    ModuleRelateByMoney,
    ModuleRelate
  },
  setup(props, context) {
    let saleReceivableFormRef = ref()
    let changeRelateItems = ref([])
    let isEdit = ref(false)
    const { dialogDrawer, type} = toRefs(props)
    let visible = computed({
      get: () => {
        if (dialogDrawer.value){
          state.dialogDrawer = true
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      formData:{
        title:'',
        content:'',
        isNeedInvoice:true,
        remark:''
      },
      formRules:{
        amount:[{ required: true, trigger: 'blur', message: '请输入'}],
        remark:[{ required: isEdit, trigger: 'blur', message: '请输入'}],
      },
      action: '#',
      headers: {'17work': Session.get('token')},
      selectedCode: {
        code: 'Money',   // 一级关联项数据code
        dataId: null // 二级关联项数据id
      },
      required:[],
      limiter:{
        module:"saleReceivable", //代表哪一个钱模块
        number:"0"  //代表限制编号
      },
      isShowPopover:false,
    })


    /**
     * 通用方法
     */
        //关闭时触发
    const close = () => {
          context.emit('update:dialogDrawer', false)
        }
    //提交
    const submit = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (!valid) return // 必填没有填就直接结束
        context.emit('onSubmit', true)
      })
    }
    //取消
    const cancel = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
      context.emit("update:dialogDrawer", false)
    }
    //文件变更时
    const changeFile = (file,fileList) => {
      state.fileList = fileList
    }
    //变更事项类型
    const changeType = (val) => {
      state.limiter.number = val
    }

    const openEdit = () => {
      isEdit.value = true
      state.isShowPopover = true
      setTimeout(function(){
        state.isShowPopover = false
      }, 3000);
    }


    return{
      ...toRefs(state),
      dialogDrawer,
      visible,
      saleReceivableFormRef,
      changeRelateItems,
      type,
      isEdit,
      Editor,
      ModuleRelateByMoney,
      ModuleRelate,
      close,
      submit,
      cancel,
      changeFile,
      changeType,
      openEdit,

    }

  }
}
</script>

<style scoped lang="scss">
:deep input[disabled] {
  -webkit-text-fill-color: #383838 !important;
  -webkit-opacity: 1;
  opacity: 1;
  cursor: not-allowed;
}
</style>
